<template>
  <page-card title="开放平台接口">
    <div>
      <a-form layout="inline">
        <a-row style="height:56px">
          <a-col :span="8">
            <a-button v-if="hasPermission('add')"
                      type="primary"
                      icon="plus"
                      action
                      @click="apiAdd()">新增</a-button>
          </a-col>
          <a-col :span="16"
                 style="text-align: right;">
            <a-input-search style="width:240px"
                            v-model="queryParam.apiName"
                            placeholder="关键字:接口名称"
                            @search="search"
                            allowClear />
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table :pagination="pagination"
             @change="handleTableChange"
             ref="table"
             :rowKey="(record, index) => index"
             :data-source="dataSource"
             :columns="columns">
      <span slot="status"
            :style="{color:statusCell[record.status].color}"
            slot-scope="text, record">{{ statusCell[record.status].text }}</span>
      <template slot="operation"
                slot-scope="text, record">
        <template v-if="hasPermission('edit')">
          <a @click="apiEdit(record)">编辑</a>
        </template>
        <template v-if="hasPermission('delete')">
          <a-divider type="vertical"
                     v-if="hasPermission('delete', 'edit')" />
          <a-popconfirm title="确定要删除吗？"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="apiDel(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <a-modal v-model="modal.visible"
             :title="modal.title"
             ok-text="保存"
             cancel-text="取消"
             @ok="save">

      <a-row>
        <a-col :span="24">
          <a-form-model ref="form"
                        :model="form"
                        :rules="rules"
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }">
            <a-form-model-item label="接口名称"
                               prop="apiName">
              <a-input placeholder="请输入接口名称"
                       v-model.trim="form.apiName" />
            </a-form-model-item>
            <a-form-model-item label="接口地址"
                               prop="apiAddress">
              <a-input placeholder="请输入接口地址"
                       addon-before="/"
                       v-model.trim="form.apiAddress" />
            </a-form-model-item>
            <a-form-model-item label="接口分类"
                               prop="apiTypeCode">
              <a-select allowClear
                        placeholder="请选择接口分类"
                        v-model="form.apiTypeCode">
                <a-select-option v-for="item in selectList"
                                 :value="item.dictKey"
                                 :key="item.id">
                  {{ item.dictValue }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="是否启用">
              <a-switch checked-children="开"
                        un-checked-children="关"
                        default-checked
                        v-model="status" />
            </a-form-model-item>
            <a-form-model-item label="描述">
              <a-textarea placeholder="请输入描述"
                          :rows="4"
                          v-model="form.remake" />
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>
  </page-card>
</template>

<script>
import { PAGINATION, TABLE_STATUS_CELL } from '../../constants'
import { deleteRecord, updateRecord, addRecord, getRecordList, getRecordBasic } from '../../api/open-api/index'
export default {
  data () {
    return {
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      selectList: [],
      modal: {
        visible: false,
        title: ''
      },
      form: {
        id: '',
        apiName: '',
        apiAddress: '',
        apiTypeCode: '',
        status: '1',
        remake: ''
      },
      status: true,
      rules: {
        apiName: [
          {
            required: true,
            message: '请输入接口名称'
          },
          { max: 30, message: '接口名称不能超过30位' }
        ],
        apiAddress: [
          {
            required: true,
            message: '请输入接口地址'
          },
          { max: 100, message: '接口地址不能超过100位' }

        ],
        apiTypeCode: [
          {
            required: true,
            message: '请选择接口分类'
          }
        ]
      },

      dataSource: [],
      columns: [
        {
          title: '接口名称',
          dataIndex: 'apiName',
          align: 'center'
        },
        {
          title: '接口地址',
          dataIndex: 'apiAddress',
          align: 'center'
        },
        {
          title: '分类名称',
          dataIndex: 'apiTypeName',
          align: 'center',
          width: '200px'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: '100px',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          width: '150px',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      queryParam: {
        apiName: '',
        code: 'JKFL'
      },
      deleteBtnDisabled: false,
      data: []
    }
  },
  mounted () {
    this.loadDic()
    this.load({
      currPage: 1,
      pageSize: this.pagination.pageSize
    })
  },
  activated () {
    this.load({
      currPage: 1,
      pageSize: this.pagination.pageSize
    })
  },
  methods: {
    load (params = {}) {
      getRecordList({ ...params, ...this.queryParam }).then((response) => {
        this.dataSource = response.list
        this.pagination.current = response.currPage
        this.pagination.total = response.totalCount
      })
    },
    loadDic () {
      getRecordBasic().then((response) => {
        this.selectList = response
      })
    },
    apiAdd () {
      this.form.id = ''
      this.form.apiName = ''
      this.form.apiAddress = ''
      this.form.apiTypeCode = ''
      this.form.status = '1'
      this.form.remake = ''
      this.modal.visible = true
      this.modal.title = '新增'
      this.$nextTick(function () {
        this.$refs.form.clearValidate()
      })
    },
    apiEdit (record) {
      this.form.id = record.id
      this.form.apiName = record.apiName
      this.form.apiAddress = record.apiAddress
      this.form.apiTypeCode = record.apiTypeCode
      this.form.status = record.status
      this.status = this.getStatus(record.status)
      this.form.remake = record.remake

      this.modal.visible = true
      this.modal.title = '编辑'
      this.$nextTick(function () {
        this.$refs.form.clearValidate()
      })
    },
    apiDel (record) {
      const _this = this
      deleteRecord(record.id).then((response) => {
        _this.load({
          currPage: _this.pagination.current,
          pageSize: _this.pagination.pageSize
        })
        // _this.message.info('删除成功')
      })
    },
    getStatus (status) {
      if (status === '1') {
        status = true
      } else if (status === '0') {
        status = false
      } else if (status === true) {
        status = '1'
      } else if (status === false) {
        status = '0'
      }
      return status
    },
    save () {
      this.form.status = this.getStatus(this.status)
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            updateRecord(this.form).then((response) => {
              this.modal.visible = false
              this.search()
            })
          } else {
            addRecord(this.form).then((response) => {
              this.modal.visible = false
              this.search()
            })
          }
        }
      })
    },
    search () {
      this.load({
        currPage: 1,
        pageSize: this.pagination.pageSize
      })
    },
    handleTableChange (pagination) {
      this.pagination = pagination
      this.load({
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize
      })
    }
  }
}
</script>

<style>
</style>
